<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="root"></div>
    <script>
        // 注意：mustache是不能通过简单的正则就实现的，我们这里只是一个小演示
        let str = '我爱尚硅谷，我也爱你';
        // 因为一般情况下replace方法是只替换第一个目标的，所以我们要用正则，并且在第二个斜杠后面加上g，代表全局替换;
        console.log(str.replace(/我/g,'他'));



        // 其实replace的第二个参数可以传一个函数，这个函数一般返回想要替换目标的内容。而且当repalce第一个参数为正则表达式的时候，这个函数是可以接收参数的
        let str2 = '<h1>我今天买了个{{thing}},我很{{mood}}</h1>';
        console.log(str2.replace(/\{\{(\w+)\}\}/g,(a,b,c,d)=>{
            // 通过控制台的打印你会发现，a就是正则表达式匹配到的内容，b为\w捕获到的内容，c为正则表达式匹配到的内容的下标，d就是被replace的字符串本身。
            console.log(a,b,c,d);
            return '123123';
        }));


        /*
            那么这样的话，我们就可以实现一个较为简单的模板渲染了
        */
       let reg = /\{\{(\w+)\}\}/g;
       let templateStr = '<h1>我今天买了个{{thing}},我很{{mood}}</h1>';
       let data = {
            thing:'MacBook Pro',
            mood:'开心'
       };
       document.querySelector('.root').innerHTML = templateStr.replace(reg,(a,b)=>{
        // 前面说了参数b就是双大括号里面的内容，也就是捕获到的内容。所以我们利用这个和data里的属性相对应，即可实现目标数据的替换
            return data[b];
       })
    </script>
</body>
</html>